/**
* ClassName: register
* Package: src/views
* Description: 用户注册页面
*
* @Author Liu Wenrui
* @Create 2025/9/24 16:00
* @Version 1.0
*/

<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <span class="back-btn" @click="goBack">&#8592;</span>
            <p>用户注册</p>
        </header>
        <!-- 表单部分 -->
        <ul class="form-box">
            <li>
                <div class="title">
                    手机号码：
                </div>
                <div class="content">
                    <input type="text" @blur="checkUserId" v-model="user.userPhone" placeholder="手机号码">
                </div>
            </li>
            <li>
                <div class="title">
                    邮箱：
                </div>
                <div class="content">
                    <input type="email" v-model="user.email" placeholder="邮箱">
                </div>
            </li>
            <li>
                <div class="title">
                    密码：
                </div>
                <div class="content">
                    <input type="password" v-model="user.password" placeholder="密码">
                </div>
            </li>
            <li>
                <div class="title">
                    确认密码：
                </div>
                <div class="content">
                    <input type="password" v-model="confirmPassword" placeholder="确认密码">
                </div>
            </li>
            <li>
                <div class="title">
                    用户名称：
                </div>
                <div class="content">
                    <input type="text" v-model="user.userName" placeholder="用户名称">
                </div>
            </li>
            <li>
                <div class="title">
                    性别：
                </div>
                <div class="content" style="font-size: 3vw;">
                    <input type="radio" v-model="user.userSex" value="1" style="width:6vw;height: 3.2vw;">男
                    <input type="radio" v-model="user.userSex" value="0" style="width:6vw;height: 3.2vw;">女
                </div>
            </li>
        </ul>
        <div v-if="errorMsg" style="color: red; margin: 2vw 0; text-align: center;" v-html="errorMsg"></div>
        <div class="button-login">
            <button @click="register">注册</button>
        </div>
        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>
<script>
import Footer from '../components/Footer.vue';
export default {
    name: 'Register',
    data() {
        return {
            user: {
                userPhone: '',
                password: '',
                userName: '',
                userSex: 1,
                email: ''
            },
            confirmPassword: '',
            errorMsg: ''
        }
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        checkUserId() {
            this.$axios.get('/auth/check-phone', {
                params: { phone: this.user.userPhone }
            }).then(response => {
                if (response.data.data === false) {
                    this.user.userPhone = '';
                    alert('此手机号码已存在！');
                }
            }).catch(error => {
                console.error(error);
            });

            this.$axios.get('/auth/check-email', {
                params: { email: this.user.email }
            }).then(response => {
                if (response.data.data === false) {
                    this.user.email = '';
                    alert('此邮箱已存在！');
                }
            }).catch(error => {
                console.error(error);
            });

            this.$axios.get('/auth/check-username', {
                params: { username: this.user.userName }
            }).then(response => {
                if (response.data.data === false) {
                    this.user.userName = '';
                    alert('此用户名已存在！');
                }
            }).catch(error => {
                console.error(error);
            });
        },
        register() {
            if (this.user.userPhone == '') {
                alert('手机号码不能为空！');
                return;
            }
            if (this.user.password == '') {
                alert('密码不能为空！');
                return;
            }
            if (this.user.password != this.confirmPassword) {
                alert('两次输入的密码不一致！');
                return;
            }
            if (this.user.userName == '') {
                alert('用户名不能为空！');
                return;
            }
            if (this.user.email == '') {
                alert('邮箱不能为空！');
                return;
            }
            //注册请求
            this.$axios.post('/auth/register', {
                username: this.user.userName,
                password: this.user.password,
                email: this.user.email,
                phone: this.user.userPhone,
                firstName: "milabo",
                lastName: "milabo",
                gender: this.user.userSex
            }).then(response => {
                console.log(response);
                if (response.data.success === true) {
                    alert('注册成功！');
                    this.$router.go(-1);
                } else {
                    alert(response.data.message || '注册失败！');
                }
            }).catch(error => {
                let msg = '注册失败！';
                if (error.response) {
                    if (error.response.status === 403) {
                        msg = '注册失败，请检查你注册信息的格式是否正确！';
                    } else if (error.response.data) {
                        if (error.response.data.message) {
                            msg = error.response.data.message;
                        } else if (error.response.data.errors) {
                            msg = error.response.data.errors.map(e => e.defaultMessage || e.message).join('<br>');
                        } else if (typeof error.response.data === 'string') {
                            msg = error.response.data;
                        }
                    }
                }
                this.errorMsg = msg; // 显示到页面
                console.error(error.response ? error.response.data : error);
            });
        },
    },
    components: {
        Footer
    }
}
</script>
<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
    width: 100%;
    margin-top: 12vw;
}

.wrapper .form-box li {
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
    display: flex;
    align-items: center;
}

.wrapper .form-box li .title {
    flex: 0 0 18vw;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}

.wrapper .form-box li .content {
    flex: 1;
}

.wrapper .form-box li .content input {
    border: none;
    outline: none;
    width: 100%;
    height: 4vw;
    font-size: 3vw;
}

.wrapper .button-login {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #fff;
    background-color: #38CA73;
    border-radius: 4px;
    border: none;
    outline: none;
}

.wrapper .button-register {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #666;
    background-color: #EEE;
    border-radius: 4px;
    border: none;
    outline: none;
    border: solid 1px #DDD;
}

.back-btn {
    position: absolute;
    left: 3vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4vw;
    cursor: pointer;
    color: #fff;
    z-index: 1001;
    padding: 0 1vw;
    user-select: none;
}
</style>